<!--
 * @Author: your name
 * @Date: 2020-07-22 15:10:38
 * @LastEditTime: 2020-07-28 23:43:32
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \暑期前端培训\5. Javascript   核心DOM BOM操作\js核心DOM BOM操作 05\13-动画原理.html
--> 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .car {
            position: relative;
            left: 0;
            width: 100px;
            height: 100px;
            background-color: pink;
        }

        .car::after {
            content: '';
            width: 0;
            height: 0;
            position: absolute;
            top: 0;
            left: 100px;
            border: 50px solid pink;
            border-color: transparent  transparent transparent pink;
        }

        .lc,.rc {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            margin-top: 85px;
            background-color: skyblue;
        }

        .lc {
            float: left;
        }

        .rc {
            float: right;
        }
    </style>
</head>

<body>
    <div class="car">
        <div class="lc"></div>
        <div class="rc"></div>
    </div>

    <script>
        // 动画原理
        // 1. 获得盒子当前位置  
        // 2. 让盒子在当前位置加上1个移动距离
        // 3. 利用定时器不断重复这个操作
        // 4. 加一个结束定时器的条件
        // 5. 注意此元素需要添加定位， 才能使用element.style.left
        // var div = document.querySelector('div');
        // var timer = setInterval(function() {
        //     if (div.offsetLeft >= 400) {
        //         // 停止动画 本质是停止定时器
        //         clearInterval(timer);
        //     }
        //     div.style.left = div.offsetLeft + 1 + 'px';
        // }, 50);

        let car = document.querySelector('.car')
        let timer = setInterval(function(){
              if(car.offsetLeft >= 400) {
                  clearInterval(timer)
              }

              car.style.left = car.offsetLeft + 1 + 'px'
        },50)
    </script>
</body>

</html>